<template>
    <div class="main">
        <input type="text" placeholder="请输入任务,按回车键确认" v-model="title" @keyup.enter="add">
    </div>
</template>
<script lang='ts'>
import { defineComponent, ref } from 'vue'
export default defineComponent({
    name: 'MyHeader',
    props: {
        addTodo: {
            type: Function,
            required: true
        }
    },
    setup(props) {
        const title = ref('')
        // 回车的事件的回调函数
        const add = () => {
            //获取文本框中输入的数据,判断不为空
            const text = title.value
            if (!text.trim()) return
            //此时有数据
            const todo = {
                id: Date.now,
                title: text,
                isCompleted: false
            }
            props.addTodo(todo)
            //清空文本框
            title.value = ''
        }
        return {
            title,
            add
        }

    }
})
</script>
<style scoped lang="scss">
.main {
    width: 80%;
    background-color: aqua;
    border: 1px solid bisque;
    height: 50px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    input {
        font-size: 20px;
        width: 80%;
        height: 80%;
    }
}
</style>